<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .window {
            width: 640px;
            background-color: rgb(36, 149, 201);
            padding: 10px;
        }

        .window > .title {
            margin-bottom: 5px;
        }

        .window > ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            display: flex;
            flex-direction: column;
            height: 320px;
            border: solid 1px rgb(178, 224, 245);
            background-color: white;
            font-size: 18px;
            overflow-x: hidden;
            overflow-y: scroll;
        }
        
        .window > .control {
            padding-top: 10px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-content: center;
        }

        .window > .control > input {
            font-size: 18px;
        }
        .window > .control > input[type=text] {
            width: 80%;
        }
    </style>
</head>
<body>
    <div class="window">
        <div class="title">
            <span>纯蓝网络聊天室</span>
        </div>
        <ul>
            <li v-for="item in msgList">{{ item }}</li>
        </ul>
        <div class="control">
            <input type="text" v-model="inputMsg" placeholder="请输入消息" />
            <input type="button" value="发送" @Click="sendMsg" />
        </div>
    </div>
    <script src="./uuid.js"></script>
    <script src="../../node_modules/socket.io-client/dist/socket.io.js"></script>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: ".window",
            data () {
                return {
                    server: undefined,
                    nickName: "",
                    uuid: "",
                    inputMsg: "",
                    msgList: []
                };
            },
            methods: {
                getNickName () {
                    let nickName = "";
                    while (true) {
                        nickName = prompt("请输入你的昵称：");
                        if (nickName.trim() == "") {
                            alert("昵称不能为空");
                        }
                        else if (nickName.length < 2 || nickName.length > 16) {
                            alert("昵称长度必须为2 ~ 16个字符以内");
                        }
                        else {
                            break;
                        }
                    }
                    return nickName;
                },
                sendMsg () {
                    this.server.emit("sendmsg", this.inputMsg);
                    this.inputMsg = "";
                }
            },
            mounted () {
                this.uuid = uuidv4();
                try {
                    this.server = io("http://localhost:1024");
                    this.nickName = this.getNickName();
                    this.server.emit("uuid", this.uuid);
                    this.server.emit("nickname", this.nickName);
                    this.server.on("getmsg", (res) => {
                        let msg = res;
                        this.msgList.push(msg);
                    });
                }
                catch (e) {
                    console.log(e.message);
                }
            }
        });
    </script>
</body>
</html>